<template>
  <div>
    <Cascader v-model="value" :data="data" change-on-select :load-data="loadData" @on-change="onChange"></Cascader>
  </div>
</template>

<script>
import { GetNationAreaByParentId } from '@/api/common.js'

export default {
  name: 'cityCascader',
  data () {
    return {
      data: [],
      value: []
    }
  },
  async created () {
    const res = await GetNationAreaByParentId({ parentId: 0 })
    this.data = res.map(it => {
      return {
        value: it.id,
        label: it.name,
        children: [],
        loading: false
      }
    })
  },
  methods: {
    async loadData (item, callback) {
      item.loading = true;

      const res = await GetNationAreaByParentId({ parentId: item.value })
      item.children = res.map(it => {
        return {
          value: it.id,
          label: it.name
        }
      })
      item.loading = false;
      callback();
    },
    onChange (arr) {
      console.log(arr);
      
      this.$emit('getProvince', arr)
    },
    reset () {
      this.value = []
    }
  }
}
</script>

<style lang='less' scoped>
</style>
